<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue demo13(组件)</title>
    <script src="../build/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <h2>基本用法</h2>
        <hello-msg></hello-msg>
    </div>
    <div>
        <h2>父子组件</h2>
        <parent-child></parent-child>
    </div>
    <div>
        <h2>Props</h2>
        <greeting name="xiaobao"></greeting>
    </div>
    <div>
        <h2>Dynamic props</h2>
        <h3>单向数据流</h3>
        <p>Hello, {{nameSingle}}</p>
        <greeting2 :name="nameSingle"></greeting2>
        <h3>双向数据流</h3>
        <p>Hello, {{nameDouble}}</p>
        <greeting2 :name.sync="nameDouble"></greeting2>
    </div>
    <div>
        <h2>Custom events</h2>
        <template id="child-template">
            <div>
                <input type="text" v-model="msg">
                <button v-on:click="dispatchMsg">Dispatch</button>
            </div>
        </template>
        <template id="parent-template">
            <div>
                <p>{{message|json}}</p>
                <child-custom-event v-on:child-msg="handleChildEvent"></child-custom-event>
            </div>
        </template>
        <parent-deal-events></parent-deal-events>
    </div>
</div>
<script>
    /*-------------基本用法--------------------*/
    //define
    var helloMsg = Vue.extend({
        template: '<p>Hello world!</p>'
    });
    //register
    Vue.component('hello-msg', helloMsg);

    /*-------------父子组件--------------------*/
    Vue.component('parent-child', {
        template: '<p>This is parent</p><child-component></child-component>',
        components: {
            'child-component': {
                template: '<p>This is child</p>'
            }
        }
    });

    /*-------------Props--------------------*/
    Vue.component('greeting', {
        props: ['name'],
        template: '<p>Hello, {{name}}</p>'
    });

    /*-------------Dynamic Props--------------------*/
    Vue.component('greeting2',{
        props: {
            name: {
                default: function () {
                    return 'xiaobaowei';
                }
            }
        },
        template: '<input type="text" v-model="name"/>'
    });

    /*-------------Custom events--------------------*/
    Vue.component('parent-deal-events', {
        template: '#parent-template',
        data: function () {
            return {
                message: []
            }
        },
        methods: {
            handleChildEvent: function (msg) {
                this.message.push(msg);
            }
        },
        components: {
            'child-custom-event': {
                template: '#child-template',
                data: function () {
                    return {
                        msg: ''
                    }
                },
                methods: {
                    dispatchMsg: function () {
                        if (this.msg.trim()) {
                            this.$dispatch('child-msg', this.msg.trim());
                            this.msg = '';
                        }
                    }
                }
            }
        }
    });

    //create a root instance
    new Vue({
        el: '#app',
        data: {
            nameSingle: 'xiaobao',
            nameDouble: 'xiaobao'
        }
    });
</script>
</body>
</html>